<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>系统设置</title>
    <link href="../../component/pear/css/pear.css" rel="stylesheet">

    <style>
        .sys-config .layui-form-item {
            margin-bottom: 0px;
        }

        .sys-config .layui-form-pane .layui-form-label {
            padding: 8px 5px;
        }
    </style>
</head>
<body class="pear-container sys-config">
<form class="layui-form layui-form-pane" action="" name="frmMain">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    注意系统设置是yaml格式
                    <button style="float: right;margin-top: 10px;" type="submit"
                            class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
                            lay-filter="save">
                        保存
                    </button>
                </div>
                <div class="layui-card-body layui-row layui-col-space10">
							<pre id="codeEditor" class="ace_editor" style="min-height:85vh">
                               <s:textarea class="ace_text-input" cssStyle="width:97.5%;"/>
                            </pre>
                </div>
            </div>
        </div>
    </div>
</form>
<script src="../../config/apiUrl.js"></script>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script type="text/javascript" src="../../component/ace/src-min/ace.js"></script>
<script type="text/javascript" src="../../component/ace/src-min/ext-language_tools.js"></script>
<script>
    layui.use(['form', 'code', 'common', 'toast'],async function () {
        var form = layui.form;
        var common = layui.common;
        var toast = layui.toast;
        var editor = await initEditor();

        form.on('submit(save)', function (data) {
            let value = editor.getValue();
            layer.confirm('确定要保存系统设置么', {icon: 3, title: '提示'}, async function (index) {
                layer.close(index);
                try {
                    let ajax = await common.ajax({
                        url: apiUrlConfig.sysConfig.save,
                        data: JSON.stringify({
                            config: value
                        })
                    })
                    toast.success({title: false, message: '保存成功'})
                } catch (e) {
                    toast.error({title: false, message: '保存失败'})
                }
            });
            return false;
        });
    });

    //初始化代码编辑器
    async function initEditor() {
        var common = layui.common;
        var toast = layui.toast;
        //获取控件   id ：codeEditor
        editor = ace.edit("codeEditor");
        //设置风格和语言（更多风格和语言，请到github上相应目录查看）
        theme = "monokai";
        //theme = "terminal";
        //语言
        language = "yaml";
        editor.setTheme("ace/theme/" + theme);
        editor.session.setMode("ace/mode/" + language);
        //字体大小
        editor.setFontSize(15);
        //设置只读（true时只读，用于展示代码）
        editor.setReadOnly(false);
        //自动换行,设置为off关闭
        editor.setOption("wrap", "free");
        //启用提示菜单
        ace.require("ace/ext/language_tools");
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });
        let ajax = await common.ajax({
            url: apiUrlConfig.sysConfig.get,
            type: "get"
        })
        if(ajax.data == null){
            editor.setValue("## 网站配置\n" +
                "logo: \n" +
                "  ## 网站名称\n" +
                "  title: \"快速开发平台\"\n" +
                "  ## 网站图标\n" +
                "  image: \"admin/images/logo.png\"\n" +
                "## 菜单配置\n" +
                "menu: \n" +
                "  ## 菜单数据来源\n" +
                "  data: \"/service-adminManage/organization/sysNav/getListUserNav\"\n" +
                "  ## 菜单接口的请求方式 GET / POST\n" +
                "  method: \"POST\"\n" +
                "  ## 是否同时只打开一个菜单目录\n" +
                "  accordion: true\n" +
                "  ## 侧边默认折叠状态\n" +
                "  collapse: false\n" +
                "  ## 是否开启多系统菜单模式\n" +
                "  control: false\n" +
                "  ## 默认选中的菜单项\n" +
                "  select: \"0\"\n" +
                "  ## 是否开启异步菜单，false 时 data 属性设置为静态数据，true 时为后端接口\n" +
                "  async: true\n" +
                "## 视图内容配置\n" +
                "tab: \n" +
                "  ## 是否开启多选项卡\n" +
                "  enable: true\n" +
                "  ## 保持视图状态\n" +
                "  keepState: true\n" +
                "  ## 开启选项卡记忆\n" +
                "  session: true\n" +
                "  ## 浏览器刷新时是否预加载非激活标签页\n" +
                "  preload: true\n" +
                "  ## 可打开的数量, false 不限制极值\n" +
                "  max: \"30\"\n" +
                "  ## 首页\n" +
                "  index: \n" +
                "    id: \"10\" ## 标识 ID , 建议与菜单项中的 ID 一致\n" +
                "    href: \"view/console/console1.html\" ## 页面地址\n" +
                "    title: \"首页\" ## 标题\n" +
                "## 主题配置\n" +
                "theme: \n" +
                "  ## 默认主题色，对应 colors 配置中的 ID 标识\n" +
                "  defaultColor: \"2\"\n" +
                "  ## 默认的菜单主题 dark-theme 黑 / light-theme 白\n" +
                "  defaultMenu: \"dark-theme\"\n" +
                "  ## 默认的顶部主题 dark-theme 黑 / light-theme 白\n" +
                "  defaultHeader: \"light-theme\"\n" +
                "  ## 是否允许用户切换主题，false 时关闭自定义主题面板\n" +
                "  allowCustom: true\n" +
                "  ## 通栏配置\n" +
                "  banner: false\n" +
                "## 主题色配置列表\n" +
                "colors: \n" +
                "- id: \"1\"\n" +
                "  color: \"#2d8cf0\"\n" +
                "  second: \"#ecf5ff\"\n" +
                "- id: \"2\"\n" +
                "  color: \"#36b368\"\n" +
                "  second: \"#f0f9eb\"\n" +
                "- id: \"3\"\n" +
                "  color: \"#f6ad55\"\n" +
                "  second: \"#fdf6ec\"\n" +
                "- id: \"4\"\n" +
                "  color: \"#f56c6c\"\n" +
                "  second: \"#fef0f0\"\n" +
                "- id: \"5\"\n" +
                "  color: \"#3963bc\"\n" +
                "  second: \"#ecf5ff\"\n" +
                "## 其他配置\n" +
                "other: \n" +
                "  ## 主页动画时长\n" +
                "  keepLoad: \"1200\"\n" +
                "  ## 布局顶部主题\n" +
                "  autoHead: false\n" +
                "  ## 页脚\n" +
                "  footer: false\n" +
                "## 头部配置\n" +
                "header:\n" +
                "  ## 站内消息，通过 false 设置关闭\n" +
                "  message: \"admin/data/message.json\"");
        }else{
            editor.setValue(ajax.data.config);
        }
        return editor;
    }
</script>
</body>
</html>